<!-- 私域首页 -->
<template>
    <view class="bgwhite" v-if="pageData">
        <view class="nav" :class="{'white': !toTop, 'color_22': toTop, 'bgwhite': toTop}">
            <view :style="{height: System.statusBarHeight + 'px'}"></view>
            <view class="p-left30" :style="{'line-height': navHeight + 'px'}">
                <text class="iconfont icon-xiangzuo size34 bold" @click="back()"></text>
                <text class="size34 bold m-left20">私域运营管理</text>
            </view>
        </view>
        <view class="top p-top160 p-left30 p-right30" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/ms_bg1.png' + ')'}">
            <view class="d-flex j-sb a-center">
                <view class="d-flex">
                    <u-avatar :src="$imgUrls(pageData.member_info.head_img)" size="45"></u-avatar>
                    <view class="m-left20">
                        <view class="size28 white m-bot20">{{ pageData.member_info.name }}({{ pageData.member_info.nick_name }})</view>
                        <view>
                            <text class="label h7 white bor_radius_6 t-letter2">{{ pageData.member_info.group_name }}</text>
                        </view>
                    </view>
                </view>
                <image :src="imgUrl + 'Uploads/private/ms_icon9.png'" mode="widthFix" style="width: 44rpx;" @click="call"></image>
            </view>
            <view class="card bgwhite bor_radius_6 m-top60 p-left20 p-right20">
                <view class="d-flex j-sb">
                    <view class="p-top20">
                        <view class="size32 color_22 bold m-bot14">今日总销量(元)</view>
                        <view class="count size40 bold800">{{ pageData.todayMoney || 0 }}</view>
                    </view>
                    <view class="d-flex">
                        <image class="m-top20" :src="imgUrl + 'Uploads/private/code_blue.png'" mode="widthFix" style="width: 40rpx;"
                            @click="toUrl('/privatePage/single/codeCard')"></image>
                        <view class="climate m-left40 white bold text-center">
                            <view class="size26">{{ pageData.chineseCalendar.term }}</view>
                            <view class="size26">{{ pageData.chineseCalendar.info }}</view>
                        </view>
                    </view>
                </view>
                <view class="d-flex j-sb m-top30">
                    <view @click="toUrl('/privatePage/single/newToday')">
                        <view class="size28 color_22 m-bot14">今日新增(位)</view>
                        <view class="count size34 bold800">{{ pageData.todayRecruit || 0 }}</view>
                    </view>
                    <view @click="toUrl('/privatePage/single/activeToday')">
                        <view class="size28 color_22 m-bot14">今日活跃(位)</view>
                        <view class="count size34 bold800">{{ pageData.todayActive || 0 }}</view>
                    </view>
                    <view @click="toUrl('/privatePage/single/orderToday')">
                        <view class="size28 color_22 m-bot14">今日订单(笔)</view>
                        <view class="count size34 bold800">{{ pageData.todayOrder || 0 }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="p-left30 p-right30">
            <view class="d-flex j-sb m-top180">
                <view class="client padding20 p-re" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/ms_bg2.png' + ')'}"
                    @click="toUrl('/privatePage/client/myClient')">
                    <view class="d-flex j-sb a-center m-bot10">
                        <text class="size28 white">我的客户(位)</text>
                        <text class="iconfont icon-xiangyouxiayiye h6 white"></text>
                    </view>
                    <view class="size32 white bold800">{{ pageData.recruit_num || 0 }}</view>
                    <image class="icon p-ab" :src="imgUrl + 'Uploads/private/ms_icon1.png'" mode="widthFix"></image>
                </view>
                <view class="order padding20 p-re" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/ms_bg3.png' + ')'}"
                    @click="toUrl('/privatePage/sale/order')">
                    <view class="d-flex j-sb a-center m-bot10">
                        <text class="size28 white">销售订单(笔)</text>
                        <text class="iconfont icon-xiangyouxiayiye h6 white"></text>
                    </view>
                    <view class="size32 white bold800">{{ pageData.sale_num || 0 }}</view>
                    <image class="icon p-ab" :src="imgUrl + 'Uploads/private/ms_icon2.png'" mode="widthFix"></image>
                </view>
            </view>
            <view class="data m-top40 bor_radius_6 d-flex f-column">
                <view class="d-flex j-sb m-bot30">
                    <view class="d-flex a-center">
                        <view class="line"></view>
                        <view class="m-left10 size34 color_22 bold">数据监控</view>
                    </view>
                    <u-icon name="reload" color="#CECECE" size="20" @click="handleReload"></u-icon>
                </view>
                <swiper class="swiper" :current="current" @change="changeSwiper">
                    <swiper-item class="d-flex" v-if="pageData.sales_target != 0 || pageData.recruit_target != 0">
                        <view class="flex-1" :class="{'m-right50': pageData.recruit_target != 0}" v-if="pageData.sales_target != 0" @click="toUrl('/privatePage/sale/saleTarget')">
                            <view class="d-flex j-sb a-center m-bot24">
                                <view class="d-flex a-center">
                                    <text class="size28 color_22">销售目标</text>
                                    <text class="label h7 white bor_radius_6 padding6-12 m-left14">{{ pageData.sales_percent || 0 }}%</text>
                                </view>
                                <text class="iconfont icon-xiangyouxiayiye h6 color_99"></text>
                            </view>
                            <view class="m-bot30">
                                <u-line-progress :percentage="pageData.sales_percent" activeColor="#FF7733" inactiveColor="#FFCDB4" height="7" :showText="false"></u-line-progress>
                            </view>
                            <view class="d-flex j-sb">
                                <view>
                                    <view class="size22 color_22 m-bot30">本月累计(元)</view>
                                    <view class="size28 color_FOD bold800">{{ pageData.monthMoney || 0 }}</view>
                                </view>
                                <view class="text-right">
                                    <view class="size22 color_22 m-bot30">本月目标(元)</view>
                                    <view class="size28 color_FOD bold800">{{ pageData.sales_target || 0 }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="flex-1" v-if="pageData.recruit_target != 0" @click="toUrl('/privatePage/sale/newTarget')">
                            <view class="d-flex j-sb a-center m-bot24">
                                <view class="d-flex a-center">
                                    <text class="size28 color_22">拉新目标</text>
                                    <text class="label h7 white bor_radius_6 padding6-12 m-left14">{{ pageData.recruit_percent || 0 }}%</text>
                                </view>
                                <text class="iconfont icon-xiangyouxiayiye h6 color_99"></text>
                            </view>
                            <view class="m-bot30">
                                <u-line-progress :percentage="pageData.recruit_percent" activeColor="#FF7733" inactiveColor="#FFCDB4" height="7" :showText="false"></u-line-progress>
                            </view>
                            <view class="d-flex j-sb">
                                <view>
                                    <view class="size22 color_22 m-bot30">本月累计(人)</view>
                                    <view class="size28 color_FOD bold800">{{ pageData.monthRecruit || 0 }}</view>
                                </view>
                                <view class="text-right">
                                    <view class="size22 color_22 m-bot30">本月目标(人)</view>
                                    <view class="size28 color_FOD bold800">{{ pageData.recruit_target || 0 }}</view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="size28 color_22">交易趋势</view>
                        <column :rawData="pageData.sale_trend" height="200rpx" :itemCount="8"></column>
                    </swiper-item>
                </swiper>
                <view class="d-flex j-centert" v-if="pageData.sales_target != 0 || pageData.recruit_target != 0">
                    <view class="dot" :class="{'active': current == item}" v-for="item in 2" :key="item" @click="current = item"></view>
                </view>
            </view>
        </view>
        <view class="m-top40 p-left15 p-right15">
            <u-grid col="4" :border="false" @click="clickGrid">
                <u-grid-item v-for="(item,index) in gridList" :key="index">
                    <view class="grid flexac p-re" :style="{background: `linear-gradient(0deg, ${item.color1}, ${item.color2})`}">
                        <image :src="imgUrl + 'Uploads/private/' + item.icon" mode="widthFix" :style="{width: index < 2 ? '60rpx' : '42rpx'}"></image>
                        <!-- 新订单 -->
                        <view class="dot p-ab h7 white bold flexac" v-if="index == 0 && pageData.order_dot != 0">{{ pageData.order_dot > 99 ? '99' : pageData.order_dot }}</view>
                        <!-- 新公告 -->
                        <view class="dot p-ab h7 white bold flexac" v-if="index == 3 && pageData.read_dot != 0">{{ pageData.read_dot > 99 ? '99' : pageData.read_dot }}</view>
                    </view>
                    <text class="size28 color_22 bold400 m-top20 m-bot40">{{ item.title }}</text>
                </u-grid-item>
            </u-grid>
        </view>
    </view>
</template>

<script>
import column from '../components/column.vue'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            gridList: [
                { title: '客户订单', icon: 'ms_icon3.png', color1: '#34C8FA', color2: '#7ADCFF' },
                // { title: '客户预约', icon: 'ms_icon4.png', color1: '#FF6164', color2: '#FFA08A' },
                { title: '素材中心', icon: 'ms_icon5.png', color1: '#814AF4', color2: '#B47FFF' },
                { title: '商品分享', icon: 'ms_icon6.png', color1: '#19DDD3', color2: '#24F4DE' },
                { title: '公告信息', icon: 'ms_icon7.png', color1: '#FB7F2C', color2: '#FFB665'  },
                { title: '自定义分组', icon: 'ms_icon8.png', color1: '#1986FF', color2: '#6AC2FF'},
                { title: '设置', icon: 'ms_icon10.png', color1: '#FF5479', color2: '#FFD9B0' }
            ],
            pageData: '',
            toTop: false,
            current: 0 // 轮播
        }
    },
    computed: {
        ...mapState(['System','navHeight','vid','share'])
    },
    components: {
        column
    },
    onShow(){
        this.initData()
    },
    methods: {
        initData(){
            this.$showLoading('')
            this.$http.get({
                url: '/PrivateSphereApi/index'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
                uni.setStorageSync('codeInfo', this.pageData.member_info)
                this.$hideLoading()
            })
        },
        handleReload(){
            this.initData()
        },
        clickGrid(index){
            console.log(index)
            switch(index){
                case 0:
                    this.toUrl('/privatePage/client/order')
                    break
                case 1:
                    this.toUrl('/privatePage/material/center')
                    break
                case 2:
                    this.toUrl('/privatePage/single/goodsShare')
                    break
                case 3:
                    this.toUrl('/privatePage/single/notice')
                    break
                case 4:
                    this.toUrl('/privatePage/single/subgroup')
                    break
                case 5:
                    this.toUrl('/privatePage/single/setUp')
                    break
            }
        },
        changeSwiper(e){
            this.current = e.detail.current
        }
    },
    onPageScroll(e){
        if(e.scrollTop > 100){
            this.toTop = true
        } else{
            this.toTop = false
        }
    },
    onShareAppMessage(){
        return {
            title: '私域运营管理',
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=12&w=2&pid=${this.vid}`
        }
    },
    onShareTimeline(){
        return {
            title: this.share.desc,
            query: `share_v_id=${this.vid}&pageType=12&w=3&pid=${this.vid}`,
            imageUrl: this.share.imageUrl
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}
.top {
    height: 450rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .card {
        width: 100%;
        height: 280rpx;      
        box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
        .count {
            color: #2D77FF;
        }
        .climate {
            height: 90rpx;
            background: #2D77FF; 
            padding: 12rpx 6rpx;        
            border-radius: 0rpx 0rpx 8rpx 8rpx;
        }
    }
}
.data {
    .swiper {
        height: 240rpx;
    }
    .line {
        width: 6rpx;
        height: 34rpx;
        background: #1764F2;
    }
    .dot {
        width: 8rpx;
        height: 8rpx;          
        background: #ECECEC;                 
        border-radius: 50%;
        margin: 0 8rpx;
        &.active {
            width: 30rpx;
            height: 8rpx;
            background: #FF5533;
            border-radius: 8rpx;
        }
    }
}
.client, .order {
    width: 330rpx;
    height: 130rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .icon {
        width: 88rpx;
        right: 32rpx;
        bottom: 0;
        z-index: 10;
    }
}
.label {
    padding: 6rpx 18rpx;
    background: #FF5438;
}
/deep/ .u-grid {
    overflow: visible !important;
    .grid {
        width: 80rpx;
        height: 80rpx;
        border-radius: 6rpx;
        .dot {
            width: 36rpx;
            height: 36rpx;
            background: #f56c6c;
            border-radius: 50%;
            right: -16rpx;
            top: -16rpx;
        }
    }
}
</style>